<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="page-card">
        <!-- *绘制工具条 -->
        <TreeTools @addDept="openDialog" :is-root="true" :tree-data="company" />
        <!-- data是树的数据 -->
        <!-- props配置选项 就是展示规则  -->
        <!-- props里面有2个核心属性： children 子级存放的字段,默认children； label显示的文字字段，默认label -->
        <!-- 一旦有插槽，就用插槽去渲染，不采用props渲染规则 -->
        <el-tree :data="data" :props="defaultProps">
          <!-- !注意：暗坑，需要给el-tree的插槽内容加上作用域才可以，否则下拉会出现bug -->
          <!-- 作用域插槽：大家要考虑scope里面到底有什么东西，要么查文档，要么自己测试 -->
          <!-- *绘制工具条 -->
          <!-- 4. 【列表功能】 渲染数据 -->
          <TreeTools
            @addDept="openDialog"
            @editDept="openEditDialog"
            @updateList="initData"
            :tree-data="data"
            slot-scope="{ data }"
          />
        </el-tree>
      </el-card>
    </div>
    <!-- * 绘制弹框 -->
    <addDept ref="addDeptRef" @loadList="initData" />
  </div>
</template>
<script>
import TreeTools from "./components/tree-tools.vue";
import { getDepartmentListApi, getDepartmentInfoApi } from "@/api/department";
import { tranListToTreeData } from "@/utils";
import addDept from "./components/add-dept.vue";
export default {
  name: "Department",
  components: { TreeTools, addDept },
  data() {
    return {
      // 根的数据
      company: {
        name: "江苏传智播客教育科技股份有限公司",
        manager: "负责人",
        id: "",
      },
      // 1. 【列表功能】定义树组件的数据
      data: [],
      defaultProps: {
        children: "child",
        label: "name",
      },
    };
  },
  created() {
    // 3. 【列表功能】 调用数据
    this.initData();
  },
  methods: {
    // 2.【列表功能】 获取组织架构数据
    async initData() {
      // 2.1 发生请求
      let res = await getDepartmentListApi();
      // 2.2 失败处理 响应拦截器
      // 2.3 成功处理 (加工数据、赋值数据)
      this.company.name = res.companyName;
      this.data = tranListToTreeData(res.depts, "");
    },
    // 监听新增打开的自定义事件
    openDialog(data) {
      console.log(data); // 要给data添加子部门
      // 通过ref获取到组件实例
      this.$refs.addDeptRef.isDialogShow = true;
      this.$refs.addDeptRef.formData.pid = data;
    },
    // 监听修改打开的自定义事件 【回显逻辑】
    async openEditDialog(data) {
      console.log(data); // 修改data这个数据  id
      // 请求要修改的数据，拿到给表单进行回显
      let res = await getDepartmentInfoApi(data);
      // 给弹框组件内的表单
      this.$refs.addDeptRef.formData = res;
      // 打开弹框
      this.$refs.addDeptRef.isDialogShow = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.page-card {
  padding: 40px 100px;
}
</style>
